パフォーマンス

Chart.js チャートは次のようにレンダリングされます。canvas要素を使用すると、レンダリングが非常に高速になります。大規模なデータセットまたはパフォーマンスを重視するアプリケーションの場合は、以下のヒントを検討してください。

ティックの計算

回転

回転値を指定する設定することによりminRotationとmaxRotationこれにより、チャートが使用する値を自動的に決定する必要がなくなります。

サンプリング

をセットするticks.sampleSizeオプション。これにより、軸をより迅速にレンダリングするために、ラベルのサブセットのみを確認してラベルの大きさが決定されます。これは、ラベルのサイズに大きな差異がない場合に最適に機能します。

アニメーションを無効にする

チャートのレンダリング時間が長い場合は、アニメーションを無効にすることをお勧めします。そうすることで、更新中にグラフを複数回表示するのではなく、1 回だけ表示するだけで済むことになります。これにより、CPU 使用率が削減され、ページ全体のパフォーマンスが向上します。

アニメーションを無効にするには

new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        animation: {
            duration: 0 // general animation time
        },
        hover: {
            animationDuration: 0 // duration of animations when hovering an item
        },
        responsiveAnimationDuration: 0 // animation duration after a resize
    }
});

データ間引き

データを間引くと最良の結果が得られます。グラフに表示するデータが大量にある場合、幅がわずか数百ピクセルのグラフに数万のデータ ポイントを表示しても意味がありません。

データ間引きには多くのアプローチがあり、アルゴリズムの選択はデータと達成したい結果によって異なります。例えば、最小/最大デシメーションではデータ内のピークが保持されますが、ピクセルごとに最大 4 ポイントが必要になる場合があります。このタイプの間引きは、データ ピークを確認する必要がある非常にノイズの多い信号に適しています。

折れ線グラフ

ベジェ曲線を無効にする

グラフ上に線を描画する場合、ベジェ曲線を無効にすると、直線を描画する方がベジェ曲線よりもパフォーマンスが向上するため、レンダリング時間が短縮されます。

グラフ全体のベジェ曲線を無効にするには:

new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        elements: {
            line: {
                tension: 0 // disables bezier curves
            }
        }
    }
});

線画を無効にする

多数のデータ ポイントがある場合は、データセットのラインのレンダリングを無効にして、ポイントのみを描画する方がパフォーマンスが向上する可能性があります。これを行うと、キャンバス上に描画するものが少なくなり、レンダリングのパフォーマンスが向上します。

回線を無効にするには:

new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            showLine: false // disable for a single dataset
        }]
    },
    options: {
        showLines: false // disable for all datasets
    }
});